<template>
	<view class="content">
		<view class="search_card">
			<view class="left_s">
				<uni-easyinput v-model="keyword" @clear="inputSearch" placeholderStyle="font-size:28rpx;"
					:inputBorder="false" placeholder="工单号、机身编码或商品名称查询">
				</uni-easyinput>
				<view class="search_btn" @click="inputSearch">
					<uni-icons type="search" size="24" color="#fff"></uni-icons>
				</view>
			</view>
		</view>
		<view class="content-list">
			<view class="" v-if="dataList.length>0">
				<view class="item_goods_list" v-for="(item,index) in dataList" :key="index">

					<p @click="userHistoryOrderDetail(item.id)">
						<view class="sty_title">
							<view class="workNo">
								{{item.workNo}}
								<!-- <image class="btn_c" @click.stop="copy(item.workNo)" src="/static/copy.svg" mode="">
								</image> -->
							</view>
							<span class="status"
								:class="item.status==1||item.status==2?'status_123':item.status==3?'status_4':item.status==5?'status_6':''">{{item.status==1?'待派单':item.status==2?'待网点确认':item.status==3?'处理中':item.status==4?'已完成':'已取消'}}</span>
						</view>
						<view class="module">{{item.module}}</view>
						<view class="tip_title">
							<view class="tip">
								报单时间：<span class="tip_color">{{item.createTime}}</span>
							</view>
							<view class="tip">
								<template v-if="item.status==4">
									完成时间：<span class="tip_color">{{item.endTime}}</span>
								</template>
								<template v-if="item.status==5">
									取消时间：<span class="tip_color">{{item.cancelTime}}</span>
								</template>
							</view>
						</view>
					</p>
					<view class="btn_change">
						<button @click="goPage(item.id)" hover-class="btn_again-hover"  size="mini" class="btn_again"
							v-if="item.status==4||item.status==5">再次申请</button>
					</view>
				</view>
				<view class="no_some" v-if="title">
					{{title}}
				</view>
			</view>
			<view v-else class="void_goods">
				<image class="img" src="/static/goods.svg"></image>
				<view class="tip" v-if="!keyword">暂无历史工单</view>
				<view class="tip" v-else>搜索暂无相关历史工单</view>
			</view>
		</view>
	</view>

</template>

<script lang="ts" setup>
	import {
		ref, onMounted, nextTick
	} from "vue";
	import store from '@/store/index.js'
	import { onReachBottom, onPullDownRefresh, onUnload } from '@dcloudio/uni-app'
	import apiOrder from "@/util/api/order.js"
	const keyword = ref()//搜索关键词
	const dataList = ref([])
	const total : any = ref()
	const page = ref(1)
	const title = ref('没有更多工单')
	// 预览图片
	const lookImg = (url : any) => {
		uni.previewImage({
			urls: [url],
		})
	}
	onUnload(() => {
		uni.hideLoading()
	})
	onPullDownRefresh(() => {
		keyword.value = ''
		dataList.value = []
		page.value = 1
		getOrderList()
		uni.stopPullDownRefresh()
	})
	// 获取工单列表
	const getOrderList = async () => {
		uni.showLoading({
			mask: true,
			title: "加载中..."
		})
		let data = {
			"limit": 0,
			"name": keyword.value,
			"page": page.value
		}
		await apiOrder.getUserHistoryOrder(data).then(res => {
			if (res.code == 20000) {
				if (page.value > 1) {
					dataList.value = [...dataList.value, ...res.data.rows]
				} else {
					dataList.value = res.data.rows
				}

				total.value = res.data.total
			}
		})
		uni.hideLoading()
	}

	// 历史申请详情信息
	const userHistoryOrderDetail = (id : string) => {
		uni.navigateTo({
			url: '/pages_user/home/way/historyDetail?id=' + id
		})
	}
	const inputSearch=()=>{
		page.value =1
		getOrderList()
	}
	const goPage = (id) => {
		store.commit('setorderGoodsTypes', [])
		store.commit('setchackFaultList', [])
		store.commit('setchackFaultItem', { id: null })
		store.commit('setcheckBrandItem', { id: null })
		store.commit('setcheckClassifyItem', { id: null })
		store.commit('setappointmentTime', null)
		store.commit('setUserOrder', {
			"address": "", //客户详细地址
			"area": "", //地址-县/区
			"city": "", //地址-市
			"helpOtherCreateOrder": false, //	是否代他人建单：0-否，1-是	
			"name": "", //客户姓名
			"otherPhone": "", //其他电话
			"phone": "", //客户手机号
			"province": "", //地址-省
			"town": "", //地址-镇
			"userId": null
		})
		uni.navigateTo({
			url: '/pages_user/home/add?id=' + id
		})
	}
	onMounted(() => {
		getOrderList()
	})
	onReachBottom(() => {
		if (total.value > dataList.value.length) {
			page.value = page.value + 1
			getOrderList()
		}
	})
</script>

<style lang="scss" scoped>
	.content {
		background-color: #f6f7fa;
		height: 100vh;

		.search_card {
			position: fixed;
			display: inline-flex;
			background-color: #f6f7fa;
			z-index: 2;
			left: 0;
			right: 0;

			.left_s {
				margin: 24rpx;
				flex: 1;
				display: inline-flex;
				align-items: center;
				background-color: #f3f3f3;
				border-radius: 40rpx;

				:deep(.uni-easyinput__content) {
					height: 70rpx;
					border-radius: 40rpx 0 0 40rpx;
					background-color: #fff !important;
				}

				.search_btn {
					color: #fff;
					font-size: 28rpx;
					padding: 0 20rpx;
					line-height: 69rpx;
					height: 69rpx;
					background-color: #007cff;
					border-radius: 0 40rpx 40rpx 0;
				}
			}
		}

		.content-list {
			background-color: #f6f7fa;
			padding-top: 100rpx;
			padding-bottom: 200rpx;

			.no_some {
				font-size: 24rpx;
				color: #ccc;
				text-align: center;
				width: 100%;
			}

			.item_goods_list {
				background-color: #fff;
				margin: 24rpx;
				border-radius: 10rpx;
				padding: 14rpx 24rpx;
				position: relative;

				.sty_title {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.status {
						font-size: 22rpx;
						background-color: #ecf5ff;
						color: #007cff;
						padding: 8rpx;
						border-radius: 4rpx;
					}

					.status_123 {
						color: #e6a23c;
						background-color: #fdf6ec;

					}

					.status_4 {
						color: #00c0c0;
						background-color: #ebf6f6;

					}

					.status_6 {
						color: #909399;
						background-color: #f4f4f5;

					}

					.workNo {
						font-size: 28rpx;
						// font-weight: bold;
						// padding: 20rpx 0 24rpx;
						display: flex;
						align-items: center;

						.btn_c {
							height: 30rpx;
							line-height: 30rpx;
							width: 24rpx;
							margin-left: 24rpx;
						}
					}

				}

				.module {
					font-size: 24rpx;
					// color: #666;
					font-weight: bold;
					// margin-left: 8rpx;
					padding: 12rpx 0 16rpx;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					word-wrap: break-word;
					word-break: break-all;

				}


				.tip_title {
					font-size: 24rpx;
					color: #777;

					.tip {
						padding-bottom: 6rpx;

						.tip_color {
							color: #000;
						}
					}
				}

				.btn_change {
					text-align: right;
				uni-button:after {
					height: 196%;
				}
					.btn_again {
						margin: 1rpx;
						background-color: #fff;
						padding: 0 12rpx;
						// border-radius: 4rpx;
						color: #00c0c0;
						font-size: 24rpx;
						margin-left: 25rpx;
						// border: 1rpx solid #00c0c0;
					}

					.btn_again-hover {
						background-color: #00c0c02b;
					}

					.btn_title {
						background-color: #fff;
						padding: 0 12rpx;
						color: #007cff;
						font-size: 24rpx;
						margin-left: 24rpx;
					}

					.btn_title-hover {
						background-color: #007cff2b;
					}
				}
			}
		}

		.void_goods {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			width: 100%;
			height: 60vh;

			.img {
				width: 60%;
				height: 250rpx;
			}

			.tip {
				color: #aaa;
				font-size: 28rpx;
			}
		}
	}
</style>